<template>
  <div class="container-fluid">
    <div class="row my-4" style="flex-wrap: nowrap">
      <div class="col-lg-8 col-md-6 mb-md-0 mb-4" style="flex: 1">
        <order-card />
      </div>
      <div class="col-lg-4 col-md-6" v-if="this.$store.state.showBid">
        <tou-biao />
      </div>
    </div>
    <div class="row my-4">
      <div class="card z-index-2" style="margin-top: 30px">
        <gradient-line-chart
          id="chart-line"
          title="2022 订单完成曲线图"
          description="<i class='fa fa-arrow-up text-success'></i>
      <span class='font-weight-bold'>4% more</span> in 2021"
          :chart="{
            labels: [
              'Apr',
              'May',
              'Jun',
              'Jul',
              'Aug',
              'Sep',
              'Oct',
              'Nov',
              'Dec',
            ],
            datasets: [
              {
                label: '大型订单',
                data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
              },
              {
                label: '中型订单',
                data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
              },
            ],
          }"
        />
      </div>
    </div>
  </div>
</template>
<script>
import OrderCard from "./components/OrderCard.vue";
import GradientLineChart from "@/examples/Charts/GradientLineChart.vue";
import {
  faHandPointer,
  faUsers,
  faCreditCard,
  faScrewdriverWrench,
} from "@fortawesome/free-solid-svg-icons";
import TouBiao from "./components/toubiao.vue";
export default {
  name: "OrderManage",
  data() {
    return {
      iconBackground: "bg-gradient-success",
      faCreditCard,
      faScrewdriverWrench,
      faUsers,
      faHandPointer,
      toubiaoVisible: false,
    };
  },
  components: {
    OrderCard,
    TouBiao,
    GradientLineChart,
  },
};
</script>
